<template>
  <div class="content">
    <div class="section">
      <table class="orderTitle">
        <tr>
          <td>订单状态:</td>
          <td>待支付</td>
        </tr>
        <tr>
          <td>订单编号:</td>
          <td>Re12122121212</td>
        </tr>
      </table>
      <div v-for="(item, index) in orderInfo" :key="index" class="orderList">
        <div class="titleDesc">
          <div class="storename">
            <div><img :src="item.storeImg" alt="" /></div>
            {{ item.storeName }}
          </div>
        </div>
        <template v-for="item2 in item.product">
          <van-card
            :key="item2.id"
            :num="item.num"
            :price="item2.price"
            :desc="item2.desc"
            :title="item2.title"
            :thumb="item2.thumb"
            origin-price="10.00"
          >
            <template #tags>
              <div class="specifications">{{ item.specify }}</div>
            </template>
          </van-card>
        </template>
      </div>
      <table class="padd">
        <tr>
          <td>总金额:</td>
          <td>￥121</td>
        </tr>
        <tr>
          <td>优惠金额:</td>
          <td>￥121</td>
        </tr>
        <tr>
          <td>运费:</td>
          <td>￥121</td>
        </tr>
        <tr>
          <td>实付金额:</td>
          <td>￥121</td>
        </tr>
      </table>

      <div>
        <h5>订单信息</h5>
        <table>
          <tr>
            <td>配送方式:</td>
            <td>平台统一配送</td>
          </tr>
          <tr>
            <td>支付方式:</td>
            <td>无</td>
          </tr>
          <tr>
            <td>下单时间:</td>
            <td>{{ new Date() }}</td>
          </tr>
          <tr>
            <td>备注信息:</td>
            <td>无</td>
          </tr>
        </table>
      </div>
      <div>
        <h5>收货信息</h5>
        <table>
          <tr>
            <td>店家名称:</td>
            <td>小店</td>
          </tr>
          <tr>
            <td>姓名:</td>
            <td>张三</td>
          </tr>
          <tr>
            <td>手机号:</td>
            <td>15888585454</td>
          </tr>
          <tr>
            <td>地区:</td>
            <td>陕西省西安市碑林区</td>
          </tr>
          <tr>
            <td>详细地址:</td>
            <td>碑林区长安南路</td>
          </tr>
          <tr>
            <td>邮编:</td>
            <td>710000</td>
          </tr>
        </table>
      </div>
      <div>
        <h5>发票信息信息</h5>
        <table v-if="true" >
          <tr>
            <td>无发票信息</td>
          </tr>
        </table>
        <table v-else>
          <tr>
            <td>发票类型:</td>
            <td>普通发票</td>
          </tr>
          <tr>
            <td>发票抬头:</td>
            <td>个人</td>
          </tr>
          <tr>
            <td>发票内容:</td>
            <td>商品明细</td>
          </tr>
        </table>
      </div>
      <div v-if="$route.params.state == 5">
        <h5>退货信息</h5>
        <table>
          <tr>
            <td>退货类型:</td>
            <td>部分退货</td>
          </tr>
          <tr>
            <td>退货原因:</td>
            <td>实物不符</td>
          </tr>
          <tr>
            <td>申请时间:</td>
            <td>{{ new Date() }}</td>
          </tr>
          <tr>
            <td>详细说明:</td>
            <td>
              <div>订单中的商品目前没有备货，申请退货。</div>
              <div class="tuiImg">
                <img src="https://img01.yzcdn.cn/vant/ipad.jpeg" alt="" />
                <img src="https://img01.yzcdn.cn/vant/ipad.jpeg" alt="" />
                <img src="https://img01.yzcdn.cn/vant/ipad.jpeg" alt="" />
                <img src="https://img01.yzcdn.cn/vant/ipad.jpeg" alt="" />
              </div>
            </td>
          </tr>
        </table>
      </div>
      <div v-else class="btn_return">
          <button type="button" @click="returnProduct()">申请退货</button>
      </div>
      <OrderBtn state="3" class="footer"></OrderBtn>
    </div>
  </div>
</template>

<script>
import OrderBtn from "../../components/order/OrderBtn.vue";
props:['state']
export default {
  name: "orderDetail",
  components: { OrderBtn},
  data() {
    return {
      orderInfo: [
        {
          id: "1",
          storeName: "剥壳者商城",
          orderState: "卖家处理中",
          state: "6",
          num: "30",
          specify: "独立包装(1个装)",
          storeImg: "https://img01.yzcdn.cn/vant/ipad.jpeg",
          orderNumber: new Date().getTime(),
          product: [
            {
              id: "1",
              price: "3.5",
              desc: "甜得很",
              title: "黑美人西瓜",
              thumb: "https://img01.yzcdn.cn/vant/ipad.jpeg",
            },
            {
              id: "2",
              price: "3.5",
              desc: "甜得很",
              title: "脆皮西瓜",
              thumb: "https://img01.yzcdn.cn/vant/ipad.jpeg",
            },
          ],
          allMoney: "10.5",
        },
      ],
    };
  },
  created() {},
  methods:{
      returnProduct(e){
          this.$router.push({name:'applyDetail',params:{id:1}})
      }
  }
};
</script>

<style lang="less" scoped>
.content {
  margin-top: 3.125rem;
  .section {
    margin-bottom: 3.4375rem;
  }
  .orderTitle {
    tr:first-child {
      td:first-child {
        font-size: .875rem;
        font-weight: 700;
      }
      td:last-child {
        font-size: 1rem;
        color: #4bd863;
        font-weight: 700;
      }
    }
    tr:last-child {
      td:last-child {
        color: #319bd8;
      }
    }
  }
  .padd > tr > td:last-child {
    color: red;
  }
  .padd > tr:last-child > td {
    font-size: .875rem;
    font-weight: 700;
  }
  h5 {
    margin: 0;
    padding: .625rem !important;
    background-color: #f2f2f2;
  }
  table,
  td,
  tr {
    border-left: none;
    padding: .125rem .625rem;
    font-size: .8125rem;
    border: .0625rem solid rgba(235, 233, 233, 0.678);
    height: 2.1875rem;
  }
  tr > td:last-child {
    width: 75%;
    // color: red;
  }
  tr > td:first-child {
    width: 25%;
  }
  table {
    width: 100%;
    border-collapse: collapse;
  }
  .btn_return{
      padding: .5rem;
      margin-top: 3.125rem;
      border-top:.0313rem solid rgba(211, 211, 211, 0.37);
      border-bottom:.0313rem solid rgba(211, 211, 211, 0.37);
      text-align: right;
      button{
        border-radius: .25rem;
        border: none;
        height: 1.875rem;
        width: 6.25rem;
        color: rgb(92, 92, 92);
      }
  }
}
.orderList {
  margin-bottom: .3125rem;
  border-bottom: .75rem solid #f2f2f2;
  .titleDesc {
    display: flex;
    justify-content: space-between;
    padding: .3125rem .625rem;
    align-content: center;
    margin-top: .5rem;
    .storename {
      font-size: .875rem;
      color: 000;
    }
    & > div:first-child > div {
      float: left;
      height: 1.25rem;
      line-height: 1.25rem;
      width: 1.25rem;
      border-radius: .625rem;
      img {
        height: 100%;
        width: 100%;
      }
    }
  }
  .specifications {
    display: inline-block;
    height: 1.25rem;
    line-height: 1.25rem;
    padding: .25rem .375rem;
    background-color: #ececec;
    border-radius: .1875rem;
  }
}
.content {
  .footer {
    position: fixed;
    bottom: 0;
    right: 0;
    margin-top: 3.125rem;
  }
}
.tuiImg {
  display: flex;
  height: 3.125rem;
  img {
    height: 100%;
  }
}
</style>